<!--processed-->
<link rel="stylesheet" href="/src/component/date/datepicker.css">
<link rel="stylesheet" href="/views/worldpay/tmp.css">
<section id="worldpay">
    <div class="breadcrumb">
        <span>Dispute Management</span>
    </div>
    <div class="layout-processed feat-grid">
        <form id="form" action="" class="header">
            <div class="clearfix">
                <div class="header-item fl ml20"><label>Department：</label></div>
                <div class="header-item w10 fl">
                    <section data-name="department_id" class="com-select">
                        <div class="sel-item">
                            <input class="sel-head" type="text" value="All" readonly UNSELECTABLE="on" placeholder="请选择"/>
                            <input name="department_id" type="hidden" value="">
                            <i class="sel-icon"></i>
                        </div>
                        <ul class="sel-content" id="department_id" style="">
                            <!--事业部填充-->
                        </ul>
                    </section>
                </div>

                <div class="header-item fl ml20"><label>Merchant Code：</label></div>
                <div class="header-item w10 fl">
                    <section data-name="code" class="com-select">
                        <div class="sel-item">
                            <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="请选择"/>
                            <input name="merchantCode" type="hidden" value="">
                            <i class="sel-icon"></i>
                        </div>
                        <ul class="sel-content" id="code" style="">
                            <!--Merchant Code-->
                        </ul>
                    </section>
                </div>

                <div class="is-processed header-item fl ml20 hide"><label>time：</label></div>
                <div class="is-processed header-item fl createTimeReset hide">
                    <div id="worldpayTime" class="c-datepicker-date-editor J-datepicker-range-day">
                        <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
                        <input placeholder="Start Date" name="start_time" class="c-datepicker-data-input only-date" value="">
                        <span class="c-datepicker-range-separator">-</span>
                        <input placeholder="End Date" name="end_time" class="c-datepicker-data-input only-date" value="">
                    </div>
                </div>

                <div class="is-processed header-item fl ml20 hide"><label>Owner：</label></div>
                <div class="is-processed header-item w10 fl hide">
                    <section data-name="owner" class="com-select">
                        <div class="sel-item">
                            <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="请选择"/>
                            <input name="email_cs_admin_id" type="hidden" value="">
                            <i class="sel-icon"></i>
                        </div>
                        <ul class="sel-content" id="owner" style="">
                            <li data-val="" class="sel-list"></li>
                        </ul>
                    </section>
                </div>

                <div class="header-item fl"><button id="check" type="button" class="btn-e ml10">Query</button></div>

                <div class="header-item fr mr30">
                    <button id="search" type="button" class="btn-e">Search</button>
                </div>
                <div class="header-item w13 fr mr10">
                    <!--search-->
                    <div class="search-a fx-row-b">
                        <i id="searchBtn" class="iconfont icon-sousuo"></i>
                        <input name="orderCode" type="text" placeholder="Order code">
                    </div>
                </div>
            </div>

            <div class="header-sort fx-row-s mt7">
                <div data-val="0" class="sort-list active-sort col-sm-3">New</div>
                <div data-val="1" class="sort-list col-sm-3">Processed</div>
            </div>
        </form>

        <div class="data-box">
            <table class="table-a">
                <thead class="t-head">
                <tr>
                    <th class="tc">Order Code</th>
                    <th>Amount</th>
                    <th>Risk</th>
                    <th>Payment Status</th>
                    <th>Status Date</th>
                    <th class="is-processed hide">Owner</th>
                    <th class="is-processed hide">Processing time</th>
                    <th class="is-processed hide">Processing count</th>
                    <th>Information</th>
                </tr>
                </thead>
                <tbody data-name="worldPayData">
                    <!--填充list-->
                </tbody>
            </table>
        </div>

    </div>
    <footer class="footer fx-row-b">
        <div>
            <span>Showing <span id="page-start">1</span> to <span id="page-end">20</span> of <span id="page-total">0</span> entries</span>
            <select name="page">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
            <span>records per page</span>
        </div>
        <section id="box-page"></section>
    </footer>
</section>

<!--渲染模板开始-->

<!--站点列表-->
<script id="worldpay-department-list" type="text/html">
    <li data-val="" class="sel-list">All</li>
    {{each data as v i}}
    <li data-val="{{v.id}}" class="sel-list">{{v.department_name}}</li>
    {{/each}}
</script>

<!--code列表-->
<script id="worldpay-code-list" type="text/html">
    <li data-val="" class="sel-list">All</li>
    {{each data as v i}}
    <li data-val="{{v.merchantCode}}" class="sel-list">{{v.merchantCode}}</li>
    {{/each}}
</script>

<!--owner列表-->
<script id="worldpay-owner-list" type="text/html">
    <li data-val="" class="sel-list">All</li>
    {{each data as v i}}
    <li data-val="{{v.email_cs_admin_id}}" class="sel-list">{{v.email_name}}</li>
    {{/each}}
</script>

<!--list data    {{set abc = $imports.status == 'new' ? '' : 'hide'}}-->
<script id="worldpay-list" type="text/html">
    {{set isTrue = $imports.emailStatus == 0 ? 'hide' : ''}}
    {{each data as v i}}
    <tr class="nth">
        <td class="w15 tc">{{v.orderCode}}</td>
        <td>{{v.amount}}</td>
        <td>{{v.riskScore}}</td>
        <td>{{v.lastEvent}}</td>
        <td>{{v.booking_date}}</td>
        <td class="is-processed {{isTrue}}">{{v.owner}}</td>
        <td class="is-processed {{isTrue}}">{{v.process_time}}</td>
        <td class="is-processed {{isTrue}}">{{v.processing_count}}</td>
        <td class="w15">
            <div class="fx-row-a">
                {{if(v.is_reply >0)}}
                <a class="" href="/{{$imports.path}}#worldpay/view/{{v.orderCode}}" target="_self">view info</a>
                {{/if}}
                <a class="btn-parent" href="/{{$imports.path}}#worldpay/detail/{{v.orderCode}}" target="_self">
                    {{if(v.is_reply >0)}}
                    <button class="btn-a2 btn-animate">
                        <i class="send-animate"><span class="send-main"></span></i>
                        <span class="send-text">Submit extra Info</span>
                    </button>
                    {{else}}
                    <button class="btn-a1 btn-animate">
                        <i class="send-animate"><span class="send-main"></span></i>
                        <span class="send-text">Submit info</span>
                    </button>
                    {{/if}}
                </a>
            </div>
        </td>
    </tr>
    {{/each}}
</script>

<!-- js -->
<script>

    $.extend(window.p,{
        page:1,
        num:20,
        merchant_id:com.getCookie("merchant_id") ? com.getCookie("merchant_id") : null,
        total:0,
        pageObj:null,
        comCheck:null,
        src : [
            "/src/component/date/moment.min.js",
            "/src/component/date/datepicker.all.js",
        ],
        emailStatus:0,
        department_id:'',
        codeObj:null,
        ownerObj:null,
        data:{

        },
    });

    $(function(){

        init();

        function init(){
            if(com.getCookie('pageNum')) {
                p.num = com.getCookie("pageNum");
            }
            //默认分页显示
            $("select[name='page']").val(p.num);

            //初始化分页
            initPage();

            //选择分页事件
            $("select[name='page']").on('change',function(){
                var val = $(this).val();
                com.setCookie('pageNum',val,720);
                p.num = val;
                request();
                //location.reload();
            });


            //初始化选择组件
            $("[data-name='department_id']").comSelect({
                callback:function(val,text){
                    p.department_id = val;
                    getCode();
                }
            });
            p.codeObj = $("[data-name='code']").comSelect();
            p.ownerObj = $("[data-name='owner']").comSelect();


            app.dynamicLoadJs(p.src,'worldpay',function(){
                $('#worldpayTime').datePicker({
                    hasShortcut: true,
                    format: 'YYYY-MM-DD',
                    isRange: true,
                    shortcutOptions: [
                        {
                            name: 'Last week',
                            day: '-7,0'
                        },
                        {
                            name: 'Last M',
                            day: '-30,0'
                        },
                    ]
                });
            });

            //查询事件
            $("#check,#search").on('click',function(){
                var id = $(this).prop('id');
                if(id == 'search'){
                    $(".header-sort").find('.sort-list').removeClass('active-sort');
                }else{
                    //去掉搜索框内容防止触发搜索
                    $("[name='orderCode']").val('');
                }
                request('init');
                //$(".sort-list").eq(0).click()
            });

            //切换头部状态
            $(".header-sort").on('click',".sort-list",function(){
                p.emailStatus = $(this).attr('data-val');

                if(p.emailStatus == 0){
                    $("input[name='start_time']").val('');
                    $("input[name='end_time']").val('');
                }else{
                    setTime();
                }

                $(this).addClass('active-sort').siblings('.sort-list').removeClass('active-sort');
                $("[data-name='orderCode']").val('');
                request('init')
            });

            /*$(".data-box").on('click','.btn-animate',function(){
                $(this).addClass('active-animate');
            })*/

            //默认请求事业部
            reqDepartment();

            //默认请求Owner
            getOwner();

        }

        //请求所有事业部
        function reqDepartment(){
            app.ajax({
                type:'post',
                url:app.api('/api/business/all/list'),
                data:{},
                success:function(res){
                    var tmp = template('worldpay-department-list',res);
                    $("#department_id").html(tmp);
                    getCode();
                }
            })
        }

        //请求code
        function getCode(){
            app.ajax({
                type:'get',
                url:app.api('/api/wp/account/getMerchantCode/' + p.department_id),
                success:function(res){
                    if(res.code == 0){
                        var tmp = template('worldpay-code-list',res);
                        $("#code").html(tmp);
                        p.codeObj.init();
                        request('init');
                    }else{
                        $.comMessage({
                            type:'warning',
                            text:res.msg,
                        });
                    }
                }
            })
        }

        //请求owner
        function getOwner(){
            app.ajax({
                type:'get',
                url:app.api('/api/wp/account/getOwner'),
                success:function(res){
                    if(res.code == 0){
                        var tmp = template('worldpay-owner-list',res);
                        $("#owner").html(tmp);
                        p.ownerObj.init();
                    }else{
                        $.comMessage({
                            type:'warning',
                            text:res.msg,
                        });
                    }
                }
            })
        }

        //切换站点
        function toggleSite(id){
            app.ajax({
                type:'get',
                url:app.api('/ppal/getsites/' + id),
                success:function(res){
                    if(res.code == 0){
                        var headTmp = template('header-sort',res.data.data.cnt_data);
                        $(".header-sort").html(headTmp);
                        com.setCookie('merchant_id',id,720);
                        p.merchant_id = id;
                        getDefaultUpdate();
                        request('init')
                    }else{
                        $.comMessage({
                            type:'warning',
                            text:res.msg,
                        });
                    }
                }
            })
        }

        function initPage(){
            p.pageObj = $("#box-page").comPage({
                total:p.total,
                pages:p.num,
                callback:function(page){
                    p.page = page;
                    request();
                }
            });
        }

        function renderLeftPage(){
            $("#page-total").html(p.total);
            $("#page-start").html((p.page-1)*p.num + 1);
            if(p.page === 1){
                $("#page-end").html(p.num);
            }else if(p.page == Math.ceil(p.total/p.num)) {
                $("#page-end").html(p.total);
            }else{
                $("#page-end").html(p.page*p.num);
            }
        }

        //请求列表
        function request(init){

            init && (p.page = 1);
            var loadObj = null;

            app.ajax({
                type:'post',
                url:app.api('/api/getCases'),
                data:getPara(),
                beforeSend:function(){
                    loadObj = $.load({
                        insert:$(".layout-processed"),
                    });
                    $('footer').removeClass('hide')
                },
                success:function(res){
                    template.defaults.imports.emailStatus = p.emailStatus;
                    if(res.code == 0){
                        console.log(res);
                        //传入当前状态
                        var tmp = template('worldpay-list', res.data);
                        $("[data-name='worldPayData']").html(tmp);

                        //分页相关
                        p.total = res.data.total_cnt;
                        if(init){
                            p.pageObj.setPage(p.total,p.num,1);
                        }else{
                            p.pageObj.setPage(p.total,p.num);
                        }
                        renderLeftPage();

                    }else{
                        $.comMessage({
                            type:'warning',
                            text:res.msg,
                        });
                        $("[data-name='worldPayData']").html('');
                        $('footer').addClass('hide')
                    }
                },
                complete:function(){
                    //模板填充后确定是否显现其余列
                    if(p.emailStatus == 0){
                        $(".is-processed").addClass('hide');
                    }else{
                        $(".is-processed").removeClass('hide');
                    }
                    loadObj.close()
                }
            });

        }

        //获取列表参数
        function getPara(){
            $.each($("#form").serializeArray(),function(index,item){
                p.data[item.name] = item.value;
            });
            //p.data.account_id = p.data.account_id || para.user.account_ids[0] || "";
            p.data.is_reply = p.emailStatus.toString();
            p.data.page = p.page;
            p.data.page_nums = p.num;
            return p.data;
        }

        function setTime(){
            var t = new Date().getTime();
            var end = com.formatDate(t,'-').split(' ')[0];
            $("input[name='start_time']").val(end);
            $("input[name='end_time']").val(end);
        }
    })

</script>